import React, { useState, useCallback, useEffect } from 'react';
import { Modal, Table } from 'antd';
import { getNumGroupUploadRecord } from '../../../../servers/servers';
import { ColumnsType } from 'antd/lib/table';
import { NumGroupUploadRecordDetail } from 'admin/schema/NumGroup';

/**
 * 号码组信息详情props
 */
interface Iprops {
  // 对话框可见性
  visible: boolean;
  // 唯一标识
  callGroupId: number;
  // 对话框关闭时的回调
  onClose: () => void;
}

/**
 * 弹窗-导入记录
 */
export const NumGroupUploadRecord: React.FC<Iprops> = ({ visible, callGroupId, onClose }) => {
  // 当前页码
  const [current, setCurrent] = useState<number>(1);
  // 每页条数
  const [pageSize, setPageSize] = useState<number>(10);
  // 数据总数
  const [total, setTotal] = useState<number>(0);
  const [tableData, setTableData] = useState<NumGroupUploadRecordDetail[]>();
  // Table loading状态
  const [tableLoading, setTableLoading] = useState<boolean>(false);

  // 每列配置
  const columns: ColumnsType<any> = [
    {
      title: '序号',
      dataIndex: 'key',
      key: 'key',
      render: (text, record, index) => index + 1 + pageSize * (current - 1),
    },
    {
      title: '操作人',
      dataIndex: 'nickName',
      key: 'nickName',
    },
    {
      title: '上传时间',
      dataIndex: 'uploadTime',
      key: 'uploadTime',
    },
    {
      title: '新增号码数',
      dataIndex: 'addNumber',
      key: 'addNumber',
    },
    {
      title: '覆盖号码数量',
      dataIndex: 'repeatNumber',
      key: 'repeatNumber',
    },
    {
      title: '失败号码数',
      dataIndex: 'failNumber',
      key: 'failNumber',
    },
  ];
  /**
   * Table数据加载
   */
  const getTableList = useCallback(async () => {
    if (!callGroupId) {
      return;
    }
    setTableLoading(true);
    try {
      const { data, count = 0 } = await getNumGroupUploadRecord(callGroupId, {
        pageNo: current,
        pageSize: pageSize,
      });
      setTableData(data);
      setTotal(Number(count) || 0);
    } catch (error) {
      console.error(`系统异常: ${JSON.stringify(error)}`);
    }
    setTableLoading(false);
  }, [callGroupId, current, pageSize]);

  // 数据初始化 && 数据更新
  useEffect(() => {
    if (visible) {
      getTableList();
    }
  }, [getTableList, visible]);

  /**
   * 翻页
   * @param pageNo 点击页码
   */
  const onChangeCurrent = (pageNo: number) => {
    setCurrent(pageNo);
  };
  /**
   *改变每页显示条数
   * @param current 当前页码
   * @param pageSize 每页显示条数
   */
  const onChangePageSize = (current: number, pageSize: number) => {
    setPageSize(pageSize);
  };

  // 分页配置
  const pagination = {
    total: total,
    showTotal: (total: number) => `共 ${total} 条`,
    current,
    pageSize: pageSize,
    showSizeChanger: true,
    onChange: onChangeCurrent,
    onShowSizeChange: onChangePageSize,
  };

  return (
    <div>
      <Modal
        width="900px"
        title="导入记录"
        visible={visible}
        footer={null}
        destroyOnClose={true}
        onCancel={() => {
          setCurrent(1);
          setPageSize(5);
          onClose();
        }}
      >
        <div className="mgr-table">
          <Table
            loading={tableLoading}
            columns={columns}
            dataSource={tableData}
            rowKey="index"
            scroll={{ x: 'max-content' }}
            pagination={pagination}
          />
        </div>
      </Modal>
    </div>
  );
};
